import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Carousel } from 'antd';
import '../carousel.css';
import { actionCreators } from '../store';
import { Link } from 'react-router-dom';

class CarouselCom extends Component {
  componentDidMount () {
    this.props.handleGetImg();
  }
  render () {
    return (
      <div className="coantianer">
        <Carousel autoplay effect="fade">
          {
            this.props.list.map((item)=> {
              return (
                <Link key={item.get('id')} to='project'>
                  <img alt="封面" className="img" src={item.get('img')} />
                </Link>
              )
            })
            
          }
        </Carousel>
      </div>
    )
  }
}

const mapState = (state) => ({
	list: state.getIn(['home', 'projectList']),
});

const mapDispatch = (dispatch) => ({
  handleGetImg () {
    dispatch(actionCreators.getProjectList())
  }
})

export default connect(mapState, mapDispatch)(CarouselCom);
